import * as echarts from 'echarts';
import React from 'react';

function Graph() {
  React.useEffect(() => {
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option = {
      title: {},
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'none',
          symbolSize: 60,
          roam: true,
          label: {
            show: true,
          },
          edgeSymbol: ['circle'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 22,
          },
          data: [
            {
              name: '冯志鹏',
              x: 600,
              y: 300,
            },
            {
              name: '历史案件',
              x: 400,
              y: 220,
            },
            {
              name: '活动区域',
              x: 400,
              y: 300,
            },
            {
              name: '物件信息',
              x: 400,
              y: 380,
            },
            {
              name: '人员标签',
              x: 800,
              y: 220,
            },
            {
              name: '社会关系',
              x: 800,
              y: 300,
            },
            {
              name: '？？',
              x: 800,
              y: 380,
            },
            {
              name: '2021年 打架斗殴',
              x: 200,
              y: 140,
            },
            {
              name: '2021年 打架斗殴2',
              x: 200,
              y: 220,
            },
            {
              name: '2021年 白云xx',
              x: 200,
              y: 300,
            },
            {
              name: '摩托车：（号牌）',
              x: 200,
              y: 400,
              itemStyle: {
                color: 'red',
              },
            },
            {
              name: '暴力倾向',
              x: 800,
              y: 80,
            },
            {
              name: '易怒',
              x: 880,
              y: 120,
            },
            {
              name: '酗酒',
              x: 950,
              y: 160,
              itemStyle: {
                color: 'red',
              },
            },
            {
              name: '惯犯',
              x: 960,
              y: 240,
              itemStyle: {
                color: 'red',
              },
            },
            {
              name: '董邦杰（同住+空间伴随）',
              x: 960,
              y: 300,
            },
          ],
          // links: [],
          links: [
            {
              source: 0,
              target: 1,
            },
            {
              source: 0,
              target: 2,
            },
            {
              source: 0,
              target: 3,
            },
            {
              source: 0,
              target: 4,
            },
            {
              source: 0,
              target: 5,
            },
            {
              source: 0,
              target: 6,
            },
            {
              source: 1,
              target: 7,
            },
            {
              source: 1,
              target: 8,
            },
            {
              source: 2,
              target: 9,
            },
            {
              source: 3,
              target: 10,
            },
            {
              source: 4,
              target: 11,
            },
            {
              source: 4,
              target: 12,
            },
            {
              source: 4,
              target: 13,
            },
            {
              source: 4,
              target: 14,
            },
            {
              source: 5,
              target: 15,
            },
          ],

          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0,
          },
        },
      ],
    };

    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    option && myChart.setOption(option);
  }, []);

  return (
    <div id="main" style={{ height: '600px' }}>
      Graph
    </div>
  );
}

export default Graph;
